<template>
    <a-form ref="formRef" :model="model" :rules="rules" v-bind="formItemLayout">
        <a-row :gutter="10">
            <a-col :span="12">
                <a-form-item label="适用工厂" name="applyFactory">
                    <a-select v-model:value="model.applyFactory" :options="applyFactoryOptions" :allowClear="true" placeholder="请选择适用工厂"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="适用体系" name="favNameTwo">
                    <a-select v-model:value="model.favNameTwo" :options="favNameTwoOptions" :allowClear="true" placeholder="请选择适用体系" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="发文部门" name="issuingDepartment">
                    <a-select v-model:value="model.issuingDepartment" :options="issuingDepartmentOptions" :allowClear="true" placeholder="请选择发文部门"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="产品范围" name="productRange">
                    <a-select v-model:value="model.productRange" :options="productRangeOptions" :allowClear="true" mode="multiple"  placeholder="请选择产品范围"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="文件更改记录" name="filesChangeLog">
                    <a-textarea v-model:value="model.filesChangeLog"  placeholder="请输入文件更改记录"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="标准条款" name="standardTerms">
                    <a-select v-model:value="model.standardTerms" :options="standardTermsOptions" :allowClear="true" mode="multiple"  placeholder="请选择标准条款"/>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang='ts' setup>
    import { ref, computed } from 'vue';

    defineOptions({
        /** 文件属性信息表单 */
        name: 'FilePropertyForm',
    });
    
    const model = defineModel({
        type: Object, // 类型检查
        required: true, // 是否必填
        // 默认值
        default: {
            applyFactory: '',
            favNameTwo: '',
            issuingDepartment: '',
            productRange: [], // 产品范围
            filesChangeLog: '', // 文件更改记录
            standardTerms: [], // 标准条款
        }, 
    });

    const formRef = ref();

    const formItemLayout = ref({
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    });
    
    const rules = ref({
        applyFactory: [{ required: true, message: '请选择适用工厂', trigger: 'change' }],
        favNameTwo: [{ required: true, message: '请选择适用体系', trigger: 'change' }],
        issuingDepartment: [{ required: true, message: '请选择发文部门厂', trigger: 'change' }],
        productRange: [{ type: 'array', required: true, message: '请选择产品范围', trigger: 'change' }],
        filesChangeLog: [{ required: true, message: '请输入文件更改记录', trigger: ['change', 'blur'] }],
        standardTerms: [{ type: 'array', required: true, message: '请选择标准条款', trigger: 'change' }],
    });


    const applyFactoryOptions = computed(() =>{
        return [
            { label: 'MTY/MTY', value: '01' },
        ]
    });
    const favNameTwoOptions = computed(() => {
        return [
            { label: 'QMS/QMS', value: '01' },
            { label: 'OEHS/OEHS', value: '02' },
        ]
    });
    const issuingDepartmentOptions = computed(() => {
        return [
            { label: 'Automation/Automation', value: '01' },
            { label: 'Software solutions/Software solutions', value: '02' },
        ]
    });

    const productRangeOptions = computed(() =>{
        return [
            { label: 'DT/DT', value: 'DT' },
            { label: 'SNB/NB', value: 'SNB' },
            { label: 'Option/Option', value: 'Option' },
        ]
    });

    const standardTermsOptions = computed(() =>{
        return [
            {label:'5.1/Leadership and commitment', value: '5.1'},
            {label:'4.4/Quality management system and process', value: '4.4'},
            {label:'All/All', value: 'All'},
        ]
    })

    function validate() {
        return new Promise((resolve) => {
            formRef.value.validate().then((values) => {
                console.log('values', values);
                resolve({valid: true, values});
            })
            .catch(error => {
                console.log('error', error);
                resolve({valid: false, values: error?.values});
            });
        })
    }
    // 对外暴露属性方法
    defineExpose({
        validate,
    });
</script>

<style scoped lang="less">
</style>